//----------------1.获取数据然后渲染到表格中----------------
function rendererData() {
    $.ajax({
        url: '/my/category/list',
        success: function(res) {
            // console.log(res);
            let str = []
            res.data.forEach(item => {
                str.push(` <tr>
         <td>${item.name}</td>
         <td>${item.alias}</td>
         <td>
             <button type="button"  class="layui-btn  layui-btn-normal layui-btn-xs" id="edit_btn" data-id=${item.id} data-name=${item.name} data-alias=${item.alias}>编辑</button>
             <button type="button"  class="layui-btn  layui-btn-danger layui-btn-xs" id="del_btn" data-id=${item.id}>删除</button>
         </td>
     </tr>`)

            });
            $('tbody').html(str.join(""))
        }
    })
}
rendererData()




// ----------------2. 点击添加类别弹出弹窗-------------------
// 模块化
let layer = layui.layer
let form = layui.form
let index
$('#add_item').on('click', function() {

    index = layer.open({
        title: '添加分类',
        content: $('#category').html(),
        area: ['500px', '300px'],

    });

})

//----------------------3.给表单添加submit事件 获取数据并渲染到表格中----------------
$('body').on('submit', '#category_form', function(e) {
    e.preventDefault()
    let a = $(this).serialize()
    $.ajax({
        url: '/my/category/add',
        type: 'POST',
        data: a,
        success: function(res) {
            // console.log(res);
            layer.msg(res.message)

            rendererData()
            layer.close(index);
        }
    })
})

// ----------------------4.点击编辑按钮获取该按钮的数据并且回填数据----------------\

$('tbody').on('click', '#edit_btn', function(e) {
    e.preventDefault()
    let a = $(this).data()
        // console.log(a);
    layer.open({
        title: '编辑分类',
        content: $('#edit').html(),
        area: ['500px', '300px'],
        success: function() {
            //数据回填 
            form.val("edit", a) // 给lay-filter后面的值改了之后就能用了...
                // $('#name_input').val(a.name)
                // $('#alias_input').val(a.alias)
                // $('#id_input').val(a.id)
        }
    });
})

//----------------------5.数据回填完修改并且渲染---------------------
$('body').on('submit', '#edit_form', function(e) {
    e.preventDefault()
    let x = $(this).serialize()
    console.log(x);
    $.ajax({
        url: '/my/category/update',
        type: 'POST',
        data: x,
        success: function(res) {
            // console.log(res);
            if (res.status === 0) {
                layer.msg(res.message, {
                    icon: 1,
                    time: 1000 //2秒关闭（如果不配置，默认是3秒） //这样也可以取消弹出层当时会有延迟 不如使用layui.close(弹出层)这样快
                }, function() {
                    rendererData()
                });

            }


        }
    })
})

// ---------------点击删除按钮删除该行数据-----------------
$('tbody').on('click', '#del_btn', function(e) {
    e.preventDefault()
    let id = $(this).data('id')
        //删除操作要询问
    layer.confirm('确认删除?', function(index) {
        $.ajax({
            url: '/my/category/delete',
            data: { id }, //因为要输入对象类型 所以需要大括号!!
            success: function(res) {
                if (res.status === 0) {
                    layer.msg(res.message);
                    rendererData()
                }

            }
        })
        layer.close(index);
    });



})